<template>
  <div class="purchased">
    <!-- <span>键来型号</span> -->
    <div>
      <van-cell is-link @click="showPopup">请选择型号</van-cell>
      <van-popup
        v-model="show"
        position="bottom"
        :style="{ height: '40%' }"
        closeable
        close-icon-position="top-right"
      >
        <span class="xinghao fr"
          ><strong>以下配置供您选择：</strong>
          <van-grid :column-num="4" :clickable="true">
            <van-grid-item
              :class="{ red: index == idx }"
              v-for="(value, idx) in abc"
              :key="idx"
              :text="value"
              @click="btn(idx)"
            />
          </van-grid>
          <!-- 按钮组 -->
          <van-button
            dot
            type="warning"
            size="small"
            class="fr"
            style="right"
            @click="car"
            >添加购物车</van-button
          >
        </span>
      </van-popup>
    </div>
    <!-- 地址信息 -->
    <div class="dd">
      <strong>收货地址:</strong>
      <span class="bb">
        <!-- <van-dropdown-menu direction="up">
       <van-dropdown-item v-model="value" :options="option1"  title='配送至' />
       </van-dropdown-menu> -->
        <van-address-list
          v-model="chosenAddressId"
          :list="list"
          default-tag-text="默认"
          @add="onAdd"
          @edit="onEdit"
        />
      </span>
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant'
import { car } from './index'
export default {
  props: {
    obj: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      index: -1,
      di: this.$store.state.user.UserInfo.id,
      abc: [
        '琥珀白87',
        '暗夜黑104',
        '星空灰87',
        '幻彩紫104',
        '森林绿87',
        '草原绿104',
        '你好绿84'
      ],
      chosenAddressId: '1',
      list: [
        {
          id: '1',
          name: '传智小马哥',
          tel: '138000000000',
          address: '湖南省长沙市岳麓区东方红大厦',
          isDefault: true
        }
      ],
      show: false,
      value: 0,
      switch1: false,
      option1: [
        { text: '东城', value: 0 },
        { text: '南城', value: 1 },
        { text: '西城', value: 2 },
        { text: '北城', value: 3 }
      ]
    }
  },
  methods: {
    showPopup () {
      this.show = true
    },
    onConfirm () {
      this.$refs.item.toggle()
    },
    onAdd () {
      Toast('新增地址')
    },
    onEdit (item, index) {
      Toast('改地址要加钱')
    },
    btn (i) {
      // refs拿到数据
      //  改变字体的样式表示已选中
      // 赋值给要传的参数对象
      // this.$refs.refx.style.color = 'red'
      this.index = i
    },
    async car () {
      // console.log(this.di)
      // console.log(this.obj.id)
      if (this.di) {
        console.log('我是登录了的')
      } else {
        Toast('尚未登录！为您跳转至登录页...')
        this.$router.push('/login')
        return
      }
      this.show = false // 关闭配置栏
      await car({
        size: 104,
        num: 1,
        isChecked: true,
        shopId: this.obj.id,
        userId: this.di
      })
      Toast('添加成功！')
    }
  }
}
</script>

<style scoped lang='less'>
.purchased {
  margin-bottom: 20px;
  height: 50px;
}
.xinghao {
  position: absolute;
  left: 0;
  top: 20px;
  width: 100%;
  padding: 0 5px;
  font-size: 10px;
}
.fr {
  float: right;
  font-size: 10px;
  margin-right: 15px;
}
.van-button--small {
  position: absolute;
  right: 15px;
  //    bottom: -1.73333rem;
}
.dd {
  font-size: 16px;
  padding-left: 15px;
  margin-bottom: 20px;
}
.bb {
  padding-right: 25px;
}
.red {
  /deep/.van-grid-item__content {
    background-color: rgb(17, 228, 62) !important;
  }
}
</style>
